<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>发票管理系统</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <style>
    .invoice-item {
      transition: transform 0.2s;
    }
    .invoice-item:hover {
      transform: scale(1.02);
    }
    .thumbnail-container {
      height: 150px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .thumbnail {
      max-height: 100%;
      max-width: 100%;
    }
  </style>
</head>
<body>
<div class="container mt-4">
  <h1 class="mb-4">发票管理系统</h1>
  <!-- 文件上传区域 -->
  <div class="card mb-4">
    <div class="card-header">
      <h5>上传发票</h5>
    </div>
    <div class="card-body">
      <form method="post" action="/api/invoices/upload" enctype="multipart/form-data">
        <div class="mb-3">
          <label for="fileUpload" class="form-label">选择PDF或图片文件</label>
          <input class="form-control" type="file" id="fileUpload" name="files" multiple
                 accept=".pdf,.jpg,.jpeg,.png,.gif">
          <small class="text-muted">支持上传多个PDF或图片文件（JPG, PNG, GIF）</small>
        </div>
        <button type="submit" class="btn btn-primary">上传并识别</button>
      </form>

      <!-- 上传结果消息 -->
      <div th:if="${message}" class="mt-3 alert alert-info"
           th:utext="${message}"></div>
    </div>
  </div>

  <!-- 发票列表 -->
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5>发票列表</h5>
      <button id="generateGridBtn" class="btn btn-secondary" disabled>生成九宫格</button>
    </div>
    <div class="card-body">
      <form id="gridForm" method="post" action="/api/invoices/grid-view">
        <div class="table-responsive">
          <table class="table table-hover">
            <thead>
            <tr>
              <th><input type="checkbox" id="selectAll"></th>
              <th>发票号</th>
              <th>类型</th>
              <th>日期</th>
              <th>金额</th>
              <th>销售方</th>
              <th>购买方</th>
              <th>预览</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="invoice : ${invoices}" class="invoice-item">
              <td><input type="checkbox" name="selectedIds" th:value="${invoice.id}"></td>
              <td th:text="${invoice.invoiceNumber}"></td>
              <td th:text="${invoice.type}"></td>
              <td th:text="${invoice.date}"></td>
              <td th:text="${invoice.amount}"></td>
              <td th:text="${invoice.seller}"></td>
              <td th:text="${invoice.buyer}"></td>
              <td>
                <a th:href="@{/uploads/{fileName}(fileName=${invoice.filePath})}"
                   target="_blank" class="btn btn-sm btn-outline-primary">
                  查看
                </a>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  // 全选/取消全选功能
  $('#selectAll').click(function(e) {
    var checkboxes = $('input[name="selectedIds"]');
    checkboxes.prop('checked', $(this).prop('checked'));
    updateGenerateButton();
  });

  // 单个选择框变化时更新按钮状态
  $('input[name="selectedIds"]').change(updateGenerateButton);

  // 更新生成按钮状态
  function updateGenerateButton() {
    var checkedCount = $('input[name="selectedIds"]:checked').length;
    $('#generateGridBtn').prop('disabled', checkedCount === 0);
  }

  // 生成九宫格按钮点击事件
  $('#generateGridBtn').click(function() {
    $('#gridForm').submit();
  });
</script>
</body>
</html>
